<template>
	<view class="hdl-search">
		<u-search shape="square" height="70" style="opacity: 0;" margin="20rpx"></u-search>
		<u-search v-model="searchModel" placeholder="点我搜索" shape="square" :show-action="true" :action-text="'搜索'" height="70"
		 class="fixed-search" margin="20rpx" :style="{top: searchTop+'px'}" @custom="searchClick" @search="searchClick"></u-search>

		<u-waterfall v-model="messageList" ref="uWaterfall">
			<template v-slot:left="{leftList}">
				<view v-for="(item, index) in leftList" :key="index">
					<!-- 这里编写您的内容，item为您传递给v-model的数组元素 -->
					<u-card :show-head="false" margin="15rpx 15rpx 15rpx 30rpx" padding="0">
						<view slot="body">
							<navigator :url="'../images/images?illustId='+item.id">
								<u-image :src="item.imageUrls[0].medium.replace('https://i.pximg.net','https://i.pixiv.cat')" mode="widthFix"></u-image>
							</navigator>
						</view>
						<view class="u-p-20" slot="foot">{{item.title}}</view>
					</u-card>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view v-for="(item, index) in rightList" :key="index">
					<!-- 这里编写您的内容，item为您传递给v-model的数组元素 -->
					<u-card :show-head="false" margin="15rpx 30rpx 15rpx 15rpx" padding="0">
						<view class="u-padding-0" slot="body">
							<navigator :url="'../images/images?illustId='+item.id">
								<u-image :src="item.imageUrls[0].medium.replace('https://i.pximg.net','https://i.pixiv.cat')" mode="widthFix"></u-image>
							</navigator>
						</view>
						<view class="u-p-20" slot="foot">{{item.title}}</view>
					</u-card>
				</view>
			</template>
		</u-waterfall>
		<u-empty class="fixed-empty" text="什么都没有找到呢QAQ" mode="search" :show="isEmptyShow"></u-empty>
		<u-loadmore bg-color="rgb(240, 240, 240)" :class="uLoadmoreClass" icon-type="flower" :status="loadStatus" :load-text="loadeText" @loadmore="loadNextPage" />
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				messageList: [],
				searchModel: "",
				keyword: "",
				page: 0,
				msg: "abc",
				loadStatus: "loadmore",
				loadeText: {
					loadmore: "不要再往上拉屏幕啦！",
					loading: "噗噗噗~",
					nomore: "已经一滴也不剩了…"
				},
				uLoadmoreClass: "hdl-hide",
				lastScrollTop: 0,
				searchTop: 44,
				isEmptyShow: false,
			}
		},
		
		// 页面第一次加载，获取用户之前的最后一次搜索记录并请求数据
		// 若无记录，则默认请求当日排行榜数据
		onReady: function() {
			// 获取用户最后一次搜索记录
			// TODO
			
			// 请求数据
		},
		// 监听页面触底触发加载下一页
		onReachBottom: function() {
			this.loadNextPage()
		},
		// 监听页面滚动控制搜索框位置
		onPageScroll: function(e) {
			let scrollTopChange = e.scrollTop-this.lastScrollTop
			if (this.searchTop - scrollTopChange > 44) {
				this.searchTop = 44
			}else if (this.searchTop - scrollTopChange < 0) {
				this.searchTop = 0
			}else {
				this.searchTop -= scrollTopChange
			}
			this.lastScrollTop = e.scrollTop
		},
		methods: {
			// 搜索
			searchClick(value) {
				if(!value.trim()){
					this.showToast({title:"好像没有输入关键词呢╮(╯▽╰)╭",type:"warning"})
					return
				}
				this.loadStatus = "loading"
				this.$api.search.illustrations({keyword:value})
				.then(res=>{
					this.keyword = value
					this.page = 1
					this.uLoadmoreClass = ""
					this.$refs.uWaterfall.clear()
					if (res.data) {
						this.isEmptyShow = false
						setTimeout(()=>{
							this.loadStatus = "loadmore"
							this.messageList.push(...res.data)
						},200)
					}else {
						this.loadStatus = "loadmore"
						this.uLoadmoreClass = "hdl-hide"
						this.isEmptyShow = true
						this.showToast({title:"什么都没有搜到呢o(╥﹏╥)o",type:"warning"})
					}
				})
				.catch(err=>{
					console.log(err);
				})
			},
			// 加载下一页内容
			loadNextPage() {
				if (!this.keyword.trim()) {
					this.showToast({title:"好像没有输入关键词呢╮(╯▽╰)╭",type:"warning"})
					return
				}
				if (this.loadStatus == "nomore") {
					return
				}
				this.loadStatus = "loading"
				this.$api.search.illustrations({keyword:this.keyword, page:++this.page})
				.then(res=>{
					if (res.data) {
						setTimeout(()=>{
							this.loadStatus = "loadmore"
							this.messageList.push(...res.data)
						},200)
					}else {
						this.loadStatus = "nomore"
						// this.showToast({title:"什么都没有搜到呢o(╥﹏╥)o",type:"warning"})
					}
				})
				.catch(err=>{
					console.log(err);
				})
			},
			// 展示提示框
			showToast(param) {
				this.$refs.uToast.show({
					title: param.title,
					type: param.type,
					duration:1500
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.hdl-search {
		.fixed-search {
			width: 710rpx;
			top: 44px;
			z-index: 997;
			background-color: #ffffff;
			position: fixed;
		}
		
		.fixed-empty {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
		
		.u-image {
			min-height: 50px;
		}
	}
</style>
